<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码整合</title>
    <style>
        td{
            width: 80px;
            height: 40px;
        }
    </style>

    <script src="scripts/jquery.min.js"></script>
</head>

<body>
<a href="js/动画效果.html">动画效果</a>;
<a href="js/BOM游览器.html">BOM_location</a>;
<a href="js/event.html">document事件</a>;
<a href="js/抽奖.html">常用对象_抽奖</a>;
<a href="js/常用对象.html">常用对象全</a>;
<a href="js/差一点点的内容列表.html">jQuery做的内容列表</a>;
<a href="js/分页.html">jQuery做的分页</a>;
<a href="CodeIntegration.html">整合代码</a>;
<script>
    // -----------------------------
    // 5. 变量命名规则
    // -----------------------------
    /*
        一个 JavaScript 标识符必须以字母、下划线（_）或者美元符号（$）开头；后续的字符也可以是数字（0-9）。
        因为 JavaScript 语言是区分大小写的，所以字母可以是从“A”到“Z”的大写字母和从“a”到“z”的小写字母。

        注：JavaScript 对大小写敏感，myVariable 和 myvariable 是不同的。如果代码出现问题了，先检查一下大小写！
        注：不能使用JavaScript关键词。
     */
    // 5.1 Number_hits，temp99，function, $credit，_name，9age，name$ 这边几个变量名是否合法？

    // let Number_hits = 1 ;
    // let temp99 = 1 ;
    // // let function = 1 ;非法
    // let $credit = 1 ;
    // let _name = 1 ;
    // // let 9age = 1 ;非法
    // let name$ = 1 ;

    // -----------------------------
    // 5. 数组
    // -----------------------------
    // 5.1 声明一个数组，存储一些数字，字符串，布尔，null等值，并尝试打印

    // let Array = [12,78,21,"sasqqsdqsadas",true,null];
    // console.log(Array);

    // 5.2 尝试遍历输出上面的数组元素

    // for (let i = 0;i < Array.length;i++) {
    //     console.log(Array[i]);
    // }
    //
    // for (let i in Array){
    //     console.log(Array[i]);
    // }
    //
    // for (let i of Array){
    //     console.log(i);
    // }

    // 删除数组的最后一个元素 - pop()
    // let v = Array.pop(); //null
    // v = Array.pop();     //true
    // 数组的末尾添加新的元素 - push()
    // Array.push(10);      //",10]
    // console.log(Array);

    // -----------------------------
    // 6. 对象
    // -----------------------------
    // 6.1 声明一个用户对象，id为1，name为李逍遥，description为仙剑1主角，然后尝试打印出其中每个属性

    // let UserInfo = {id: 1,name:"李逍遥",description:"仙剑1主角"};
    // console.log(UserInfo);
    // console.log(UserInfo.length);

    // 6.2 尝试遍历输出上面的对象中的每个属性

    // for (let el in UserInfo){
    //     console.log(UserInfo[el]);
    // }

    // for (let a of UserInfo){
    //     console.log(a.value);
    // } //不行
    
    // for (let value of Object.keys(UserInfo)){
    //     console.log(value + "......" + UserInfo[value]);
    // }

    // --------------------------------------------------------------------
    // -- 练习
    // --------------------------------------------------------------------
    // 1. 尝试声明购物车相关数据
    //价格,店铺,商品名,型号,个人信息(地址),数量,总价,商品图片
    // let userInfo = {};//个人信息
    // //数据结构
    // let shoppingCartGoodsList = [ //保存商品信息
    //     {
    //         goodsId: 1,
    //         price: 9.9,
    //         name: "秋裤",
    //         shopName: "平平无奇小店",
    //         size: "M",
    //         num: 2,
    //         img: ""
    //     },
    //     {
    //         goodsId: 2,
    //         price: 19.9,
    //         name: "内衣",
    //         shopName: "平平无奇小店",
    //         size: "M",
    //         num: 2,
    //         img: ""
    //     }
    // ];
    // console.log(shoppingCartGoodsList);

    // ----------
    // --运算符--
    // ----------
    // -- 练习 --
    // ----------
    // 1. 让用户输入一个数，判断是否是水仙花数。
    //  水仙花数是指一个 3 位数，它的每个位上的数字的 3次幂之和等于它本身（例如：1^3 + 5^3+ 3^3 = 153）。
    // let x1 = window.parseFloat(prompt("请输入一个3位数字:"));
    // let hundred1 = parseInt(x1 / 100); //百位 153/100 = 1
    // console.log(hundred1);
    // let ten1 = parseInt(x1 / 10) % 10; //十位 153/10=15 % 10 ...5
    // console.log(ten1);
    // let t1 = parseInt(x1 % 10); //个位 153 % 10 ...3
    // console.log(t1);
    // console.log( ( (hundred1 ** 3 + ten1 ** 3 + t1 ** 3) === x1) ? "水仙花数" : "不是水仙花数"); // 153 370 371 407

    // 2. 输入一个年份, 判断输入年份是不是闰年
    //  闰年条件: ①能被4整除而不能被100整除；②能被400整除。
    // let n = window.parseFloat(prompt("请输入一个年份"));
    // // &&且 ||或  ? true : false
    // console.log( (n % 4 === 0 && n % 100 !== 0 || n % 400 === 0) ? "闰年" : "不是闰年");

    // 3. 用户购买商品，输入3个商品的价格，如果三个商品中有一个超过50元，或者总价超过100元，即可以打八五折，否则不打折
    //一个大于50或者三个加起来大于100 ? true : false
    // let a = window.parseFloat(prompt("请输入第一个商品价格"));
    // let b = window.parseFloat(prompt("请输入第二个商品价格"));
    // let c = window.parseFloat(prompt("请输入第三个商品价格"));
    // console.log(a + b + c);
    // console.log((a > 50 || b > 50 || c > 50 || (a + b + c) > 100) ? "可打85折" +
    //     "\t" + "折扣价" + (a + b + c)*0.85 : "不打折");

    // --------------------------------------------------------------------
    // -- 分支结构
    // --------------------------------------------------------------------
    /*
        语法:
            1.if (condition) {
                当条件为 true 时执行的代码
            }
            2.if (condition) {
                当条件为 true 时执行的代码
            } else {
                当条件为 false 时执行的代码
            }
            3.if (condition1) {
                当条件 condition1 为 true 时执行的代码
            } else if (condition2) {
                当条件 condition2 为 true 时执行的代码
            } ... else {
               上面条件都不满足时执行的代码
            }
            4.switch(expression) {
                case 变量1:
                // 语句1代码块
                case 变量2:
                // 语句2代码块
                break;
                ...
                default:
                // 条件都不满足，执行代码块
            }
    */
    // 3.1 输入1个数字,判断是否是素数。

    // let c = window.prompt("请输入一个数字:");
    // let boolean = true;
    // for (let j = 2;j < c;j++){
    //     if (c % j === 0){
    //         console.log("不是素数");
    //         boolean = false;
    //         break;  //避免多运行
    //     }
    // }
    // if (boolean){
    //     console.log("是素数");
    // }


    // --------------------------------------------------------------------
    // -- 循环
    // --------------------------------------------------------------------
    /*
        语法:
            1.while (条件) {
                循环体代码块
              }
            2.do {
                   循环体代码块
              }
              while (条件);
            3.for (①初始化; ②条件; ④循环后执行的表达式) {
                    ③循环代码块
              }
            4.for (变量 in 对象) {
                    代码块
              }
             注：其中变量为索引
            5.for (变量 of 对象) {
                    代码块
              }
             其中变量为值
            6.对象.forEach(function (item, index, arr) {
                    代码块
              });
             item表示元素, index表示下标, arr表示数组本身
            7.break: 循环中用户退出循环的控制语句。
              continue: 循环中用于直接执行下一个循环的控制语句。
    */
    // 7.1 和电脑一直玩一个猜拳的小游戏, 用户输入石头、剪刀、布, 然后和电脑生成的进行对比。并判断谁赢,
    //  如果输入: 退出, 那么该程序退出
    //  如果点击取消按钮：那么直接进入下一轮

    // while (true) {
    //     let arr = ["石头", "剪刀", "布"];
    //     let computer = arr[Math.floor(Math.random() * 3)];
    //     console.log(computer);
    //     let user = window.prompt("请输入石头,剪刀,布:");
    //     console.log(user);
    //     if (user === "退出") { //终止
    //         break
    //     }
    //     if (user == null) { //无值当取消,进入下一轮
    //         continue;
    //     }
    //
    //     if (computer === user) {
    //         console.log("平局");
    //     } else {
    //         if (computer === "石头" && user === "剪刀") {
    //             console.log("电脑赢");
    //         } else if (computer === "石头" && user === "布") {
    //             console.log("电脑输");
    //         } else if (computer === "剪刀" && user === "布") {
    //             console.log("电脑赢");
    //         } else if (computer === "剪刀" && user === "石头") {
    //             console.log("电脑输");
    //         } else if (computer === "布" && user === "石头") {
    //             console.log("电脑赢");
    //         } else if (computer === "布" && user === "剪刀") {
    //             console.log("电脑输");
    //         }
    //     }
    // }
    // ----------------------------------------------------
    // -- 练习
    // ----------------------------------------------------
    // 2. 求出所有的水仙花数，水仙化数为3位数，并且每位上的数字的立方和等于该数本身

    // let n = 100;
    // for (let i = 1000;i > n;n++){ //限制n的范围是三位数;
    //     if ( (parseInt(n / 100) ** 3 + parseInt((n /10) % 10) ** 3 + parseInt(n % 10) ** 3) === n ){
    //         console.log(n);
    //     }
    // }

    // 3. 打印1到100之间的素数。
    let sushu = 0;
    for (let i = 1; i <= 100; i++){ //i为1~100的值
        for (let j = 2; j < i; j++){
            if (i % j === 0){
                sushu = 1;break;
            } else{
                sushu = 0;
            }
        }
        if (sushu === 0){
            console.log(i);
        }
    }

    // 4. 输出一个整数n, 求 1!+2!+3!+4!+…n!

    // <!-- 阶乘 -->
    // let n = parseInt(window.prompt("请输入一个整数"));
    // let sum = 0;
    // for (let i = 1; i <= n; i++){
    //     let product = 1;
    //     for (let j = 1; j <= i ; j++){
    //         product *= j;
    //     }
    //     sum += product;
    // }
    // console.log(sum);

    // 5. 打印九九乘法表, 用表格呈现。

    // for (let i = 1; i <= 9; i++){
    //     for (let j = 1; j <= i; j++){
    //         document.write(j + "*" + i + "=" + j*i + " ");
    //     }
    //     document.write("</<br>>")
    // }

    // document.write("<table>");
    // for (let i = 1; i <= 9; i++){
    //     document.write("<tr>");
    //     for (let j = 1; j <= i; j++){
    //         document.write("<td>");
    //         document.write(j + "*" + i + "=" + j*i + " ");
    //         document.write("</td>");
    //     }
    //     document.write("</tr>");
    //     document.write("</br>");
    // }
    // document.write("</table>");

    // 6. 打印杨辉三角

    // let lastArr = []; // 存储上一层的数据
    // let tempArr = []; // 临时存储本层数据
    //
    // console.log(1);
    // for (let i = 2; i < 10; i++){
    //     lastArr = tempArr;
    //     tempArr = [];
    //
    //     let str = "";
    //     str += "1" + " ";
    //     tempArr.push(1);
    //
    //     for (let j = 1; j < (i-1); j++){
    //         str += (lastArr[j-1] + lastArr[j]) + " "; // 等于上一层的前一个数字+当前位置数字
    //         tempArr.push(lastArr[j-1] + lastArr[j]);
    //     }
    //
    //     str += "1";
    //     tempArr.push(1);
    //
    //     console.log(str);
    // }

    // --------------------------------------------------------------------
    // -- 函数
    // --------------------------------------------------------------------
    // -------------------------------------------------------
    // -- 练习 -- 常规,匿名,arguments变量的,不定参数的,箭头,系统 --
    // -------------------------------------------------------
    // 1. 定义一个计算圆面积的函数areaOfCircle()，它有两个参数：
    //  r: 表示圆的半径；
    //  pi: 表示π的值，如果不传，则默认3.14

    // /*①.常规函数*/
    // function areaOfCircle(r, pi) {
    //     if (!pi){
    //         pi = 3.14;
    //     }
    //     console.log(pi * r * r);
    // }
    // areaOfCircle(2);

    // /*②.匿名函数*/
    // let f = function(r, pi){
    //     if (!pi){
    //         pi = 3.14;
    //     }
    //     console.log(pi * r * r);
    // }
    // f(2);

    // /*③.不定参数的函数*/

    // /*④.箭头函数*/

    // /*⑤.系统函数*/

    // 2. 声明一个匿名函数，传入1个数字，求绝对值

    // let f = function (num) {
    //     let result = num;
    //     if (num < 0){
    //         result = -num;
    //     }
    //     console.log(result);
    // };

    // 3. 声明一个没有参数的函数，使用arguments变量计算所有传入参数的和

    // function sum(){
    //     let sum = 0;
    //     for (let i in arguments){
    //         sum += arguments[i];
    //     }
    //     console.log(sum);
    // }

    // 4. 声明一个不定参数的函数，打印出所有传递的参数

    // function rest(...args){
    //     for (let i of args){
    //         console.log(i);
    //     }
    // }

    // 5. 声明一个数组，使用箭头函数进行遍历

    // let arr = ["内衣", "秋裤"];
    // let f = (arr) => {
    //     for (let v of arr){
    //         console.log(v);
    //     }
    // };

    // 6. 输出一个整数n, 求 1!+2!+3!+4!+…n!，使用1个函数封装n!

    // let n = 4;
    //
    // let sum = 0;
    // for (let i = 1; i <= n; i++){
    //     sum += factorial(i);
    // }
    // console.log(sum);
    //
    // /*
    // * 计算一个数字的阶乘
    // * */
    //
    // function factorial(num){
    //     let result = 1;
    //     for (let i = 1; i <= num; i++){
    //         result *= i;
    //     }
    //     return result;
    // }

    // 7. 求出所有的水仙花数，使用函数封装判断一个数是否是水仙花数。

    // function isFlowerNumber(num) {
    //     if (num >= 100 && num <= 999) {
    //         let hundred = Math.floor(num / 100);
    //         let ten = Math.floor((num % 100) / 10);
    //         let unitsDigit = num % 10;
    //         return (hundred ** 3 + ten ** 3 + unitsDigit ** 3) === num;
    //     }
    //     return false;
    // }
    // //console.log(isFlowerNumber(153));
    // //console.log(isFlowerNumber(154));
    // for (let i = 100; i <= 999; i++){
    //     if (isFlowerNumber(i)){
    //         console.log(i + "是水仙数");
    //     }
    // }

    // 8. 输入一个秒数, 然后开始倒计时到0秒, 最多10000秒

    // let inputSecond = parseInt(window.prompt("请输入一个秒数"));
    // if (inputSecond > 0 && inputSecond <= 10000) {
    //     //timer是定时器
    //     let timer = window.setInterval(function () {
    //
    //
    //         let hour = Math.floor(inputSecond / 3600);
    //         let minute = Math.floor((inputSecond % 3600) / 60);
    //         let second = inputSecond % 60;
    //         console.log(hour, minute, second);
    //
    //         let html = hour.toString().padStart(2, "0")
    //             + ":" + minute.toString().padStart(2, "0")
    //             + ":" + second.toString().padStart(2, "0");
    //         console.log(html);
    //
    //         document.getElementById("count-down").innerHTML = html; //把这个id标签的内容换成 html
    //
    //         console.log(inputSecond--);
    //
    //         if (inputSecond < 0) { //放开头要多考虑 = 0 时.
    //             document.getElementById("count-down").innerHTML = "End!!!";
    //             window.clearInterval(timer);
    //         }
    //
    //     }, 1000);
    // } else {
    //     console.log("请输入正确的数字");
    // }

    // 9. 计算现在到2021-09-01的时间差, 然后开始倒计时,并输出在页面上, 输出格式: x天x小时x分钟x秒

    // let date = new Date(); //获取当前时间对象
    // console.log(date);
    // let targetDate = new Date("2021-09-01"); //获取2021-09-01这个时间的对象
    // console.log("2021-09-01 这个时间的对象", targetDate);
    // let inputSecond = Math.floor((targetDate - date) / 1000);
    // console.log(targetDate - date);
    //
    // //timer是定时器
    // let timer = window.setInterval(function () {
    //
    //     let day = Math.floor(inputSecond / 86400);
    //     let hour = Math.floor((inputSecond % 86400) / 3600);
    //     let minute = Math.floor((inputSecond % 3600) / 60);
    //     let second = inputSecond % 60;
    //     console.log(hour, minute, second);
    //
    //     let html = day + "天"
    //         + hour.toString().padStart(2, "0") + "小时"
    //         + minute.toString().padStart(2, "0") + "分钟"
    //         + second.toString().padStart(2, "0") + "秒";
    //     console.log(html);
    //
    //     document.getElementById("count-down").innerHTML = html; //把这个id标签的内容换成 html
    //
    //     console.log(inputSecond--);
    //
    //     if (inputSecond < 0) { //放开头要多考虑 = 0 时.
    //         document.getElementById("count-down").innerHTML = "End!!!";
    //         window.clearInterval(timer);
    //     }
    //
    // }, 1000);

    // 10. 使用js做一个电子表, 显示: yyyy-mm-dd hh:mm:ss, 并能够随时间跳动

    // let timer = window.setInterval(function (){
    //     let date = new Date();
    //     console.log(date);
    //
    //     let year = date.getFullYear();
    //     console.log("年", year);
    //     let month = date.getMonth() + 1; // 0 ~ 11
    //     console.log("月", month);
    //     let day = date.getDate();
    //     console.log("日", day);
    //     let hour = date.getHours();
    //     let minute = date.getMinutes();
    //     let second = date.getSeconds();
    //
    //     let html = year + "-" + month.toString().padStart(2, "0") + "-"
    //         + day.toString().padStart(2, "0") + " "
    //         + hour.toString().padStart(2, "0") + ":"
    //         + minute.toString().padStart(2, "0") + ":"
    //         + second.toString().padStart(2, "0");
    //     document.getElementById("count-down").innerHTML = html;
    // }, 1000);
    document.write("提醒:函数要多看看多敲敲.");

    // --------------------------------------------------------------------
    // -- 面向对象
    // --------------------------------------------------------------------
    // 2.1 声明计应班学生类，有姓名、性别、生日、php分数属性，有相关set和get方法，有获取年龄的方法

    // function JYStudent(name, sex, birth, phpScore) {
    //     this.name = name;
    //     this.sex = sex;
    //     this.birth = birth;
    //     this.setName = function (name) {
    //         this.name = name;
    //     };
    //     this.getName = function () {
    //         return this.name;
    //     };
    //     this.setSex = function (sex) {
    //         this.sex = sex;
    //     };
    //     this.getSex = function () {
    //         return this.sex;
    //     };
    //     this.setBirth = function (birth) {
    //         this.birth = birth;
    //     };
    //     this.getBirht = function () {
    //         return this.birth;
    //     };
    //     this.setPhpScore = function (phpScore) {
    //         this.phpScore = phpScore;
    //     };
    //     this.getPhpScore = function () {
    //         return phpScore;
    //     };
    //     this.getAge = function () {
    //         let date = new Date();
    //         let year = date.getFullYear();
    //         console.log("今年", year);
    //
    //         let birthDate = new Date(this.birth);
    //         let birthYear = birthDate.getFullYear();
    //         console.log("生日", birthYear);
    //
    //         return year - birthYear;
    //     }
    // }
    // let student = new JYStudent("林河森", "男", "2000-11-30", "88");
    // console.log(student.getName(), student.getSex(), student.getAge(), student.getPhpScore());

    // 2.3 观察一下上面的两个类是不是和学生类的东西大量重复了？

    //------------------
    //--创建基类（父类）--
    //------------------
    // function Student(name, sex, birth) {
    //     this.name = name;
    //     this.sex = sex;
    //     this.birth = birth;
    //     this.setName = function (name) {
    //         this.name = name;
    //     };
    //     this.getName = function () {
    //         return this.name;
    //     };
    //     this.setSex = function (sex) {
    //         this.sex = sex;
    //     };
    //     this.getSex = function () {
    //         return this.sex;
    //     };
    //     this.setBirth = function (birth) {
    //         this.birth = birth;
    //     };
    //     this.getBirth = function () {
    //         return this.birth;
    //     };
    //     this.getAge = function () {
    //         let date = new Date();
    //         let year = date.getFullYear();
    //         console.log("今年", year);
    //
    //         let birthDate = new Date(this.birth);
    //         let birthYear = birthDate.getFullYear();
    //         console.log("生日", birthYear);
    //
    //         return year - birthYear;
    //     }
    // }

    // 2.4 改写计应班学生类，继承上例学生类

    // function JYStudent(phpScore) {
    //     this.phpScore = phpScore;
    //     this.setPhpScore = function (phpScore) {
    //         this.phpScore = phpScore;
    //     };
    //     this.getPhpScore = function () {
    //         return this.phpScore;
    //     };
    // }
    // JYStudent.prototype = new Student();
    //
    // let jyStudent = new JYStudent(80);
    // jyStudent.setName("万磁王");
    // console.log(jyStudent);
    // console.log(jyStudent.getName());
    // console.log(jyStudent.getBirth());
    // console.log(jyStudent.toString());

    document.write("提醒:面向对象继承.");
    // -----------------------------
    // 6. es6中的语法
    // -----------------------------
    /*
        es6中增加了class的语法糖，本质是根据上面实现的。
        语法：
            class 类名 {
                constructor(属性1, 属性2, ...) {
                    构造方法体
                }

                方法1名(参数1, 参数2, ...) {
                    方法体
                }
                方法2名(参数1, 参数2, ...) {
                    方法体
                }
                ...
            }
            注：类里声明方法，不用加function
            注：类里可以声明多个方法
     */
    // 6.1 使用新语法糖实现上面的学生类、计应班学生类、软件班学生类

    // class Studnet {
    //     constructor(name, sex, birth){
    //         this.name = name;
    //         this.sex = sex;
    //         this.birth = birth;
    //     }
    //     setName(name){
    //         this.name = name;
    //     }
    //     getName(){
    //         return this.name;
    //     }
    // }
    // let student = new Studnet("张三");
    // console.log(student);

    // 6.2 新语法糖和旧的用哪个？

    // 1.真正将需求转化成了代码
    // 2.写出可读的，容易维护的，方便理解的代码
    // 具情况论,特别适合OOP的就用Class。
    // O(Object对象)O(Oriented面向对象)P(Programming编程)面向对象编程
    /* OOP 只是一套帮助开发者设计和编写软件的方法论，
    * 但并不代表它能解决所有领域的问题，
    * 也不是能在所有编程语言的任何场景下都适用。
    * 我们应避免陷入这种教条主义。
    */

    // ----------------------------------------------------
    // -- 练习
    // ----------------------------------------------------
    // 1. 声明一个动物类，有名称属性，有睡觉方法。

    // function Animal(name) {
    //     this.name = name;
    //     this.sleep = function () {
    //         console.log("睡觉");
    //     }
    // }

    // 2. 声明一个斑马类，继承动物类，重写睡觉方法。

    // function Zebra() {
    //     this.sleep = function () {
    //         console.log("斑马站着睡觉");
    //     }
    // }
    // Zebra.prototype = new Animal();
    // let zebra = new Zebra();
    // zebra.sleep();

    // 3. 声明一个鱼类，继承动物类，重写睡觉方法。

    // function Fish() {
    //     this.sleep = function () {
    //         console.log("睁着眼睛睡觉");
    //     }
    // }
    // Fish.prototype = new Animal();
    // let fish = new Fish();
    // fish.sleep();

    // 4. 声明一个鸟类，继承动物类，重写睡觉方法。

    // function Bird() {
    //     this.sleep = function () {
    //         console.log("鸟的睡姿各种各样");
    //     }
    // }
    // Bird.prototype = new Animal();
    // let bird = new Bird();
    // bird.sleep();

    // 5. 声明一个人类，继承动物类，重写睡觉方法。

    // function Human() {
    //     this.sleep = function () {
    //         console.log("躺着睡,需要舒服的床");
    //     }
    // }
    // Human.prototype = new Animal();
    // let human = new Human();
    // human.sleep();

    // --------------------------------------------------------------------
    // -- 浏览器对象模型
    // --------------------------------------------------------------------
    // 1.6 设置一个按钮, 当点击这个按钮的时候, 询问是否关闭页面, 如果确认则关闭当期页面

    // document.getElementById("btn-close").onclick = function () {
    //     if (confirm("请确认是否关闭页面")){
    //         close();
    //     }
    // }

    // 3. 判断用户浏览器是否是全屏？
    // document.write("可用宽度: " + screen.availWidth);
    // document.write("可用高度: " + screen.availHeight);
    // if (screen.availWidth > outerWidth || screen.availHeight > outerHeight){
    //     console.log("不是全屏");
    // } else{
    //     console.log("是全屏");
    // }
    // ② if (outerWidth === screen.width && outerHeight === screen.Height ){
    //     console.log("游览器完全全屏模式(无任务栏)");
    // }else if (outerWidth === screen.availWidth && outerHeight === screen.availHeight){
    //     console.log("游览器全屏(带任务栏)");
    // }
    // else{
    //     console.log("游览器未全屏");
    // }

    // --------------------------------------------------------------------
    // -- document（文档对象模型）
    // --------------------------------------------------------------------

    // window.screen和location和navigator和history和frames[],可省略window;
    // document.anchors[]和applets[]和areas[]和embeds[]和forms[]和images[]和layers[]和links[];
    // 直接在浏览器检查中敲

    // console.log(window.document);
    // 3. 获取元素（HTMLElement）(Element)
    /*
    document.getElementById() // 返回对拥有指定 id 的第一个对象的引用。
    document.getElementsByName() // 返回带有指定名称的对象集合（HTMLCollection ）。
    document.getElementsByTagName() // 返回带有指定标签名的对象集合（HTMLCollection ）。
    document.getElementsByClassName() // 返回带有指定标类名的对象集合（HTMLCollection ）。
    */
    // 4. 获取和设置属性
    /*
    HTMLElement.attributes // 获取所有属性
    HTMLElement.getAttribute(属性名) // 获取指定的属性值
    HTMLElement.setAttribute(属性名, 属性值) // 设置指定的属性值

    HTMLElement.属性名 // 获取指定的属性值
    HTMLElement.属性名 = 属性值 // 设置指定的属性值
    */
    // 4.1 获取id为test-img对象，当鼠标悬浮时切换成毕业后的图片，鼠标离开后切换回去

    // document.getElementById("test-img").onmouseover = function () {
    //     this.src = "image/毕业后.jpg";
    // }
    // document.getElementById("test-img").onmouseleave = function () {
    //     this.src = "image/毕业前.jpg";
    // }
    // 4.3 修改name为phone的文本框内容为: 13950505050

    // setInterval(function () {   //计时器
    //     let phoneList = document.getElementsByName("phone");
    //     for (let item of phoneList){
    //         item.value = "13950505050";
    //     }
    // }, 3000);   //三秒后更替
    // 5. 获取和设置样式
    /*
    HTMLElement.style // 获取行内样式
    HTMLElement.style.样式名 = 样式值 // 设置相关样式
    */
    // 5.1 获取页面所有的img元素， 打印出边框样式。

    // let imgList = document.getElementsByTagName("img");
    // for (let item of imgList){
    //     console.log(item);
    //     console.log(getComputedStyle(item, null).getPropertyValue("border"));
    // }

    // 5.2 获取页面所有img元素，当鼠标悬浮时将边框颜色改成黑色#666，鼠标离开后恢复成#aaa

    // let imgList = document.getElementsByTagName("img");
    // for (let item of imgList){
    //     item.onmouseover = function () {
    //         item.style.borderColor = "#666";
    //     };
    //     item.onmouseleave = function () {
    //         item.style.borderColor = "#aaa";
    //     };
    // }
    // 6. 获取和设置元素内的内容
    /*
    HTMLElement.innerHTML // 获取和设置标签内的内容，支持html标签文本
    HTMLElement.outerHTML // 获取和设置标签(包含这个标签)的内容，支持html标签文本
    HTMLElement.innerText // 获取和设置标签内的内容，会将html标签转义
    */
    // 6.2 将id为article-content的标签内容替换为：<p>我是通过innerHTML插入进来的</p>

    // document.getElementById("article-content").innerHTML = "<p>我是通过innerHTML插入进来的</p>";
    // 7. 获取父节点和子节点
    /*
    HTMLElement.parentNode // 获取父类元素
    HTMLElement.children // 获取子类元素,只包含标签
    HTMLElement.childNodes// 获取子类元素,包含文本节点
    */
    // 7.1 获取id为header-nav的父类元素

    // console.log(document.getElementById("header-nav").parentNode.parentNode.innerHTML);

    // 7.2 遍历id为header-nav的对象子元素,children和childNodes有什么不同呢?

    // let childrenList = document.getElementById("header-nav").children;
    // for (let item of childrenList){
    //     console.log(item.href);
    // }
    // let childNodes = document.getElementById("header-nav").childNodes;
    // for (let item of childNodes){
    //     console.log(item);
    // }
    // 8. 创建元素、增加元素和删除元素
    /*
    document.createElement() // 创建一个指定标签名的元素
    HTMLElement.appendChild() // 将一个节点附加到指定父节点的子节点列表的末尾处
    HTMLElement.insertBefore() // 在参考节点之前插入一个拥有指定父节点的子节点
    HTMLElement.removeChild() // 移除已存在的元素
    */
    // 8.2 查看网易新闻, 在id为 header-nav 标签下增加新的分类元素。

    // let aElement = document.createElement("a");
    // aElement.innerHTML = "NBA";
    // aElement.href = "https://sports.163.com/nba/";
    // console.log(aElement);
    // let headerNavElement = document.getElementById("header-nav");
    // headerNavElement.appendChild(aElement);

    // 8.3 上例是增加到尾巴处,有没有办法增加到最前面?

    // headerNavElement.insertBefore(aElement, headerNavElement.firstChild);
    //思考一下为什么没有插入到后面?
    //因为insert插入的关键词是before
    //思考一下怎么插入到财经前面.

    // 8.4 移除上面新增加的元素。

    // headerNavElement.removeChild(headerNavElement.firstChild);

    //打开页面三秒后，删除id为header-nav的标签和下面的内容
    // setTimeout(function () {
    //     console.log(document.getElementById("header-nav").outerHTML = "");
    // },3000);

    // 用document获取id做动画效果

    // let boxItem = document.getElementById("box");
    // let boxItemTop = 0, boxItemLeft = 0;
    // for (let i = 0; i < 1000; i++){
    //     boxItem.style.top = boxItemTop + "px";
    //     boxItem.style.left = boxItemLeft + "px";
    //
    //     boxItemTop += 10;
    //     boxItemLeft += 10;
    //
    //     if (boxItemTop >= 483){
    //         break;
    //     }
    //     if (boxItemTop === 480){
    //         boxItemTop = 478;
    //     }
    //     if (boxItemLeft === 480){
    //         boxItemLeft = 478;
    //     }
    // }   //直接到底
    // let timer = setInterval(function () {
    //     boxItem.style.top = boxItemTop + "px";
    //     boxItem.style.left = boxItemLeft + "px";
    //
    //     boxItemTop += 5;
    //     boxItemLeft += 5;
    //
    //     if (boxItemTop >= 483){
    //         clearInterval(timer)
    //     }
    //     if (boxItemTop === 480){
    //         boxItemTop = 478;
    //     }
    //     if (boxItemLeft === 480){
    //         boxItemLeft = 478;
    //     }
    // }, 50); //渐进

    // 二级联动

    // -----------------------------
    // 8. 创建元素、增加元素和删除元素
    // -----------------------------
    /*
        document.createElement() // 创建一个指定标签名的元素
        HTMLElement.appendChild() // 将一个节点附加到指定父节点的子节点列表的末尾处
        HTMLElement.insertBefore() // 在参考节点之前插入一个拥有指定父节点的子节点
        HTMLElement.removeChild() // 移除已存在的元素
     */

    // document.getElementById("parent-category").onchange = function () {
    //     let parentCategoryId = document.getElementById("parent-category").value;
    //     document.getElementById("child-category").innerHTML = "";
    //
    //     let childArray = [
    //         {categoryName: "军事", parentCategoryId: 1},
    //         {categoryName: "图片", parentCategoryId: 1},
    //         {categoryName: "航空", parentCategoryId: 1},
    //         {categoryName: "红彩", parentCategoryId: 2},
    //         {categoryName: "NBA", parentCategoryId: 2},
    //         {categoryName: "中超", parentCategoryId: 2},
    //         {categoryName: "女人", parentCategoryId: 3},
    //         {categoryName: "教育", parentCategoryId: 3},
    //         {categoryName: "亲子", parentCategoryId: 3},
    //     ];
    //     for (let item of childArray){
    //         if (item.parentCategoryId === parentCategoryId){
    //             //console.log(item);
    //             let optionElement = document.createElement("option");
    //             optionElement.innerHTML = item.categoryName;
    //
    //             document.getElementById("child-category").appendChild(optionElement);
    //         }
    //     }
    // }

    // --------------------------------------------------------------------
    // -- 事件（event）
    // --------------------------------------------------------------------
    //action连接跳转php
    //var_dump($_REQUEST);http是当前路径,localhost:8888是比如nginx-1.18.0中html这个文件夹
    // 1. 表单事件
    /*
           常用事件:
               onfocus 	元素获取焦点时触发
               onblur 	    元素失去焦点时触发
               onchange 	该事件在表单元素的内容改变时触发( <input>, <select>, 和 <textarea>)
               onsubmit 	表单提交时触发
               onreset 	表单重置时触发
    */
    // 2. 鼠标事件
    /*
             常用事件:
                 onclick 	当用户点击某个对象时调用的事件句柄
                 ondblclick 	当用户双击某个对象时调用的事件句柄
                 onmouseout 	鼠标从某元素移开
                 onmouseover 鼠标移到某元素之上
    */
    // 3. 键盘事件
    /*
             常用事件:
                 onkeydown 	某个键盘按键被按下
                 onkeypress 	某个键盘按键被按下并松开
                 onkeyup 	某个键盘按键被松开
    */
    // 4. 框架/对象事件
    /*
            常用事件:
                onload 	一张页面或一幅图像完成加载
    */
    // --------------------------------------------------------------------
    // -- 常用对象
    // --------------------------------------------------------------------
    // 1. Array 对象
    /*
            常用方法：
                join()      // 把数组的所有元素放入一个字符串。
                pop()       // 删除数组的最后一个元素并返回删除的元素。
                push()      // 向数组的末尾添加一个或更多元素，并返回新的长度。
                reverse()   // 反转数组的元素顺序。
                sort()      // 对数组进行排序
    */
    // 2. Date 对象
    /*
            创建时间对象：
                new Date(); // 获取当前时间对象
                new Date(时间字符串); // 获取指定时间字符串的时间对象
            常用方法：
                getFullYear() // 从 Date 对象以四位数字返回年份。
                getMonth() // 	从 Date 对象返回月份 (0 ~ 11)。
                getDate() // 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
                getHours() // 返回 Date 对象的小时 (0 ~ 23)。
                getMinutes() // 返回 Date 对象的分钟 (0 ~ 59)。
                getSeconds() // 返回 Date 对象的秒数 (0 ~ 59)。
                getTime() // 返回 1970 年 1 月 1 日至今的毫秒数。
    */
    // 3. Number 对象
    /*
            常用方法：
                toFixed() // 把数字转换为字符串，结果的小数点后有指定位数的数字。
    */
    // 4. String 对象
    /*
            常用属性：
                length // 字符串的长度
            常用方法：
                indexOf() // 返回某个指定的字符串值在字符串中首次出现的位置
                replace() // 在字符串中查找匹配的子串， 并替换与正则表达式匹配的子串
                substr() // 从起始索引号提取字符串中指定数目的字符
                substring() // 提取字符串中两个指定的索引号之间的字符
                toUpperCase() // 把字符串转换为大写
                toLowerCase() // 把字符串转换为小写
                trim() // 去除字符串两边的空白
    */
    // 5. Math 对象
    /*
            常用方法：
                abs() // 返回绝对值。
                ceil() // 对数进行上舍入。
                floor() // 对数进行下舍入。
                max() // 返回最高值。
                min() // 返回最低值。
                pow() // 求幂
                random() // 返回介于 0（包含） ~ 1（不包含） 之间的一个随机数
                round() // 四舍五入
    */
    // --------------------------------------------------------------------
    // -- 正则表达式
    // --------------------------------------------------------------------
    // -----------------------------
    // -- 0. 前奏
    // -----------------------------
    // 0.1 设计一个用户名输入框，用户名只允许英文字符，大小写均可，长度8~15
    //      填写完成后对用户名进行验证。
    // 0.2 正则表达式其他还有什么用处？
    // 0.3 正则表达式调试工具：https://regexr-cn.com/
    // 0.4 熟悉JavaScript中的正则表达式的使用。
    // 1. 元字符
    /*
        常用方法：
        语法：
            . 	匹配除换行符以外的任意字符
            \w 	匹配字母或数字或下划线或汉字
            \s 	匹配任意的空白符
            \d 	匹配数字
            \b 	匹配单词的开始或结束
            ^ 	匹配字符串的开始
            $ 	匹配字符串的结束
     */
    // 1.1 设计一个用户名输入框，用户名只允许英文字符，大小写均可，长度8~15
    //      填写完成后使用正则表达式对用户名进行验证。

    // document.getElementById("userName").onchange = function () {
    //     let userName = this.value;
    //     let reg = /^[a-z]{8,15}$/gi;
    //     console.log(reg.test(userName))
    // };

    // 1.2 验证一个字符串是否是手机号码。
    //      移动：134、135、136、137、138、139、147、150、151、152、157、158、
    //          159、182、187、188。其中：147、182、187、188为3G时分配。
    //      联通：130、131、132、155、156、185、186（WCDMA)
    //      电信：133、153、180、189（CDMA2000）

    // let reg = /1[345789]\d{9}/;

    // 1.3 英文语句单词之间一般一个空格，格式化下面的英文语句，删除多余的空格。
    //      Dream  is not about   what you want , but   what you  do after  knowing who you are .
    //      理想不是想想而已，是看清自我后的不顾一切。

    // let str = "Dream  is not about   what you want ,  but   what you  do after  knowing who you are .";
    // let reg = /\s+/g;
    // str = str.replace(reg, " ");
    // let reg2 = /\s+[,\.!]/g;
    // str = str.replace(reg2, ",");
    // console.log(str);

    // let str = "Dream  is  not about what you want ,  but what you do after knowing who you are!";
    // let reg = /\s{2,100}/g;
    // let reg2 = /( , |, | ,)/g;
    // console.log(str.replace(reg, " "));
    // console.log(str.replace(reg, " ").replace(reg2, ","));  //先执行reg,再执行reg2,避免逗号后多空格的不会被reg2捕捉

    // 2. 重复符号
    /*
        匹配字符出现若干次

        语法：
            * 	重复零次或更多次
            + 	重复一次或更多次
            ? 	重复零次或一次
            {n} 	重复n次
            {n,} 	重复n次或更多次
            {n,m} 	重复n到m次
     */
    // 2.1 对第1节的的例子进行优化，使用重复符号。

    // let str = "Dream  is not about   what you want ,  but   what you  do after  knowing who you are .";
    // let reg = /\s+/g;
    // str = str.replace(reg, " ");

    // 3. 字符转义
    /*
        如果你想查找元字符本身的话，比如你查找.,或者*,就出现了问题：
        你没办法指定它们，因为它们会被解释成别的意思。
        这时你就得使用\来取消这些字符的特殊意义。
        因此，你应该使用\.和\*。当然，要查找\本身，你也得用\\。
     */

    // let str = "Dream  is not about   what you want ,  but   what you  do after  knowing who you are .";
    // let reg = /\s+/g;
    // str = str.replace(reg, " ");
    // let reg2 = /\s+[,\.!]/g;
    // str = str.replace(reg2, ",");
    // console.log(str);

    // 3.1 匹配1个字符串是否是一个域名，
    //  域名规则：
    //      a. 只提供英文字母(a-z，不区分大小写)、数字(0-9)、以及"-"(英文中的连词号，即中横线)。
    //      b. "-"不能用作开头和结尾。
    //      c. 长度不能超过63个字符。

    // let yuMing = "wanwang.aliyun.com";
    // let reg = /^[a-z0-9][a-z0-9-]{0,61}[a-z0-9]?(\.[a-z0-9-]{1,63})+$/gi;
    // console.log(yuMing.test(reg))

    // --------------------------------------------------------------------
    // -- jQuery
    // --------------------------------------------------------------------
    // console.log($);
    //id赋值的p用#,class用.
    // $(document).ready(function(){
    //     $(".dianJi").click(function(){
    //         $(this).hide();
    //     });
    // });
    // 2. 文档就绪
    /*
            $(document).ready(function(){
               // 开始写 jQuery 代码...
            });

            简洁写法：
            $(function(){
               // 开始写 jQuery 代码...
            });
    */
    // 3. jQuery选择器
    /*
        标签选择器：$("p")
        id选择器：$("#id")
        类选择器：$(".class")
        选取所有 name 属性值等于 "password" 的 <input> 元素：$("input[name='password']")
        $("*") 	// 选取所有元素
        $(this) 	选取当前 HTML 元素
        $("p.intro") 	// 选取 class 为 intro 的 <p> 元素
        $("p:first") 	// 选取第一个 <p> 元素
        $("ul li:first") 	// 选取第一个 <ul> 元素的第一个 <li> 元素
        $("ul li:first-child") 	// 选取每个 <ul> 元素的第一个 <li> 元素
        $("[href]") 	// 选取带有 href 属性的元素
        $("a[target='_blank']") 	// 选取所有 target 属性值等于 "_blank" 的 <a> 元素
        $("a[target!='_blank']") 	// 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
        $(":button") 	// 选取所有 type="button" 的 <input> 元素 和 <button> 元素
        $("tr:even") 	// 选取偶数位置的 <tr> 元素
        $("tr:odd") 	// 选取奇数位置的 <tr> 元素
    */
    // 4. jquery获取和设置属性
    /*
            设置属性：$("#runoob").attr("href", "https://www.runoob.com");
            获取属性：$("#runoob").attr("href");
            获取表单元素值：$("#username").val();
            设置表单元素值：$("#username").val("庄周");
            获取单选框和复选框选中状态：$("checkbox").prop("checked");
            单选框和复选框控制选中：$("checkbox").prop("checked", "checked");
    */
    // 5. jquery获取和设置样式
    /*
            设置样式：$("div").css("background-color");
            获取样式：$("div").css("background-color", "yellow");
            隐藏：$("div").hide();
            显示：$("div").show();
    */
    // 6. jquery获取和设置元素内的内容
    /*
            设置文本内容：$("div").text("hello jquery");
            获取文本内容：$("div").text();
            设置html内容：$("div").html("<b>hello jquery</b>");
            获取html内容：$("div").html();
    */
    // 7. jquery获取父节点和子节点
    /*
           获取父元素：$("div").parent()
           获取子元素：$("div").children()
           查找p子元素：$("div").find("p")
    */
    // 8. jquery创建元素、增加元素和删除元素
    /*
            创建元素；$("<p></p>").text("段落");
            在被选元素的结尾插入内容：$("div").append("html内容")
            在被选元素的开头插入内容：$("div").prepend("html内容")
            在被选元素之后插入内容：$("div").after("html内容")
            在被选元素之前插入内容：$("div").before("html内容")
            删除元素：$("#div1").remove();
            删除子元素：$("#div1").empty();
            删除指定元素：$("p").remove(".del");
    */
    // 9. jquery事件
    /*
            定义按钮点击事件： $("button").click(function(){
                                // 动作触发后执行的代码!!
                            });
            调用按钮点击事件： $("button").click();
            绑定一个方法：$("#btn").bind("click", function(){
                            alert("这个按钮被点击了。");
                        });
            使用on方法绑定事件：$("#btn").on("click", function(){
                            alert("这个按钮被点击了。");
                        });
            使用off方法移除事件：$("#btn").off("click");
    */
    // 实现多选框全选、反选、取消选择功能，复选框选项自定。

    // $(document).ready(function () {
    //     $("#all").click(function () {
    //         $("input[type='checkbox']").prop("checked", "checked");
    //     });
    //     $("#reverse").click(function () {
    //         $("input[type='checkbox']").each(function () {
    //             $(this).prop("checked", !$(this).prop("checked")); // $(this).prop("checked")布尔值,直接设置为反的值.
    //         })
    //     });
    //     $("#cancel").click(function () {
    //         $("input[type='checkbox']").prop("!checked");
    //     });
    // })

    // 实现分页
    // $(document).ready(function () {
    //     $(".num").click(function () {
    //         $(".num").removeClass("active");
    //         $(this).addClass("active");
    //     });
    //     $(".prev").click(function () {
    //         let prevElem = $(".active").prev();
    //         if (prevElem.attr("class") !== "prev"){
    //             prevElem.click();
    //         }
    //     });
    //     $(".next").click(function () {
    //         let nextElem = $(".active").next();
    //         if (nextElem.attr("class") !== "next"){
    //             nextElem.click();
    //         }
    //     });
    // })


</script>
<!--<script type="text/javascript" src = "main.js">-->
<!--</script>-->
</body>
</html>